<template>
  <div class="app-container">
    <el-row style="padding:0 10px" :gutter="20">
      <el-row :gutter="20">
<!--        <el-col :span="16" :xs="24" :sm="24" :md="16" :lg="16">-->
        <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="box-card">
            <el-row :gutter="20" class="card">
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <el-button class="btn-size" type="primary" icon="el-icon-message icon" circle></el-button>
                  <p>{{info.emailCount}}</p>
                  <p>已发营销邮件</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <el-button class="btn-size" type="danger" icon="el-icon-document-copy icon" circle></el-button>
                  <p>140</p>
                  <p>阅读</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <el-button class="btn-size" type="success" icon="el-icon-user icon" circle></el-button>
                  <p>{{info.customerCount}}</p>
                  <p>客户总数</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <el-button class="btn-size" type="warning" icon="el-icon-shopping-bag-2 icon" circle></el-button>
                  <p>{{info.dealCustomerCount}}</p>
                  <p>成交客户</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <el-button class="btn-size" type="info" icon="el-icon-receiving icon" circle></el-button>
                  <p>{{info.waterCustomerCount}}</p>
                  <p>7天内至公海</p>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
    <el-row style="padding:0 10px;margin-top: 10px" :gutter="20" class="follow">
      <el-row :gutter="20">
<!--        <el-col :span="16" :xs="24" :sm="24" :md="16" :lg="16">-->
        <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>跟进详情</span>
            </div>
            <el-row :gutter="20" class="card">
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <p class="num">{{info.sevenDaysNotFollow}}</p>
                  <p>七天未跟进</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <p class="num">{{info.fifteenDaysNotFollow}}</p>
                  <p>15天未跟进</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <p class="num">{{info.oneMontNotFollow}}</p>
                  <p>一个月未跟进</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <p class="num">{{info.oneYearNotFollow}}</p>
                  <p>一年未跟进</p>
                </el-card>
              </el-col>
              <el-col :span="4" :push="1" :xs="{span: 24,push: 0}" :sm="{span: 12,push: 0}" :md="{span: 4,push: 1}"
                      :lg="{span: 4,push: 1}">
                <el-card shadow="never" align="center">
                  <p class="num">{{info.longTimeNotFollow}}</p>
                  <p>更久未跟进</p>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import {Init} from "@/api/customer/home";

export default {
  name: 'index',
  data(){
    return {
      infoLoading:true,
      info:{
        emailCount: 0,
        customerCount: 0,
        dealCustomerCount: 0,
        fifteenDaysNotFollow: 0,
        oneMontNotFollow: 0,
        oneYearNotFollow: 0,
        sevenDaysNotFollow: 0,
        waterCustomerCount: 0,
        longTimeNotFollow: 0,
      },
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    async init(){
      await Init().then((res) => {
        this.info = res.data
        setTimeout(() => {
          this.infoLoading = false
        }, 0.5 * 1000)

      }).catch(() => {

      })
    }
  },
}
</script>

<style scoped>
.app-container {
  background: unset!important;
}
.num{
  color:#304156;
  font-weight: bold;
  font-size: 20px;
  line-height: 25px;
}
.follow /deep/ .el-card__header{
  border:unset!important;
}
.btn-size {
  width: 60px;
  height: 60px;
}

.btn-size /deep/ .icon {
  font-size: 30px;
}

.card /deep/ .el-card {
  border: unset !important;
}

@media screen and (max-width: 768px) {
  .right-item {
    margin: 5px 0;
  }
}

@media screen and (max-width: 992px) {
  .right-item {
    margin: 5px 0;
  }
}

@media screen and (max-width: 1200px) {
  .right-item {
    margin: 5px 0;
  }
}
</style>
